 /* export const Container=styled.div`;


 &.fly-enter,
 &.fly-appear {
   transform: rotateZ(30deg) translate3d(100%, 0, 0);
 }

 &.fly-enter-active,
 &.fly-appear-active {
   transition: transform 0.3s;
   transform: rotateZ(0deg) translate3d(0, 0, 0);
 }

 &.fly-exit {
   transform: rotateZ(0deg) translate3d(0, 0, 0);
 }

 &.fly-exit-active {
   transition: transform 0.3s;
   transform: rotateZ(30deg) translate3d(100%, 0, 0);
 }

 `; */

 .conatiner {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000;
   transform-origin: right bottom;
   background: var(--page)
 }

 .topDesc {

   padding: 5px 20px;
   padding-bottom: 50px;
   margin-bottom: 20px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   height: 275px;
   position: relative;

   /* .background {
     z-index: -1;
     background: url(${(props)=>props.background
   }

   ) no-repeat; */
   background-position: 0 0;
   background-size: 100% 100%;
   position: absolute;
   width: 100%;
   height: 100%;
   filter: blur(20px);
 }

 .filter {
   position: absolute;
   z-index: 10;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(7, 17, 27, 0.2);
 }

 .img_wrapper {
   width: 120px;
   height: 120px;
   position: relative;





 }

 .decorate {
   position: absolute;
   top: 0;
   width: 100%;
   height: 35px;
   border-radius: 3px;
   background: linear-gradient(hsla (0, 0%, 43%, 0.4),
       hsla (0, 0%, 100%, 0));
 }

 .play_count {
   position: absolute;
   right: 2px;
   top: 2px;

   font-size: 12px;
   line-height: 15px;

   color: var(--light);


 }

 .play {
   vertical-align: top;
 }

 .img_wrapper img {
   width: 120px;
   height: 120px;
   border-radius: 3px;
 }

 .desc_wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 120px;
   padding: 0 10px;
 }

 .title {
   max-height: 70px;

   color: var(--light);
   font-weight: 700;
   line-height: 1.5;

   font-size: 16px;
 }


 .avatar {
   width: 20px;
   height: 20px;
   margin-right: 5px;


 }

 .avatar img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }

 .name {
   line-height: 20px;

   font-size: 14px;

   color: var(--desc2);



 }

 .songList {
   border-radius: 10px;
   opacity: 0.98;
 }

 .songList li {
   display: flex;
   height: 60px;
   align-items: center;
 }

 .index {
   flex-basis: 60px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   text-align: center;
 }

 .info {
   box-sizing: border-box;
   flex: 1;
   display: flex;
   height: 100%;
   padding: 5px 0;
   flex-direction: column;
   justify-content: space-around;

   border-bottom: 1px solid var(--border);
 }


 .info>span:first-child {
   color: var(--desc)
 }

 .info>span:last-child {
   font-size: 12px;


   color: #bba8a8;
 }